<!-- 文章mian区域 -->
<script>
import { getBlog } from '@/api/blog'
import Pager from '@/components/Pager'
import { formatTimestamp } from '@/utils/formatTime'

export default {
  components: {
    Pager,
  },
  data() {
    return {
      data: null,
      isLoading: true,
    }
  },
  created() {
    getBlog().then(resp => {
      this.data = resp.data
      this.isLoading = false
    })
  },
  computed: {
    pagerData() {
      const categoryId = +this.$route.params.categoryId || -1 //-1查看全部
      const current = +this.$route.query.page || 1
      const limit = +this.$route.query.limit || 10
      return {
        categoryId,
        current,
        limit
      }
    },
  },
  methods: {
    // 时间戳转日期（YYYY-MM-DD）
    formatTimestamp,
    // 分页点击事件
    handPagerChange(num) {
      if (num === this.pagerData.categoryId) {
        return;
      }
      if (this.pagerData.categoryId === -1) {
        // 全部文章
        this.$router.push({
          path: '/blog',
          query: {
            page: num,
            limit: this.pagerData.limit
          }
        });
      } else {
        // 分类文章
        this.$router.push({
          path: `/blog/cate/${this.pagerData.categoryId}`,
          query: {
            page: num,
            limit: this.pagerData.limit
          }
        });
      }
    },

    handScroll() {
      this.$bus.$emit('mainScroll', this.$refs.container)
    },
    handSetMainScroll(scrollNum) {
      this.$refs.container.scrollTop = scrollNum
    }
  },
  mounted() {
    this.$refs.container.addEventListener('scroll', this.handScroll)
    this.$bus.$on('setMainScroll', this.handSetMainScroll)
  },
  beforeDestroy() {
    this.$bus.$emit('mainScroll')
    this.$bus.$off('setMainScroll', this.handSetMainScroll)
    this.$refs.container.removeEventListener('scroll', this.handScroll)
  },
  watch: {
    $route(newVal, oldVal) {
      this.isLoading = true

      const page = +newVal.query.page || 1
      const limit = +newVal.query.limit || 10
      const categoryId = +newVal.params.categoryId || -1
      getBlog(page, limit, categoryId).then(resp => {
        this.data = resp.data
        this.isLoading = false
      })
      this.$refs.container.scrollTop = 0
    }
  }

}
</script>



<template>
  <div class="blog-list-container" ref="container" v-loading="isLoading">
    <ul v-if="data">
      <li v-for="item in data.rows" :key="item.id">
        <div class="thumb">
          <RouterLink :to="{
            name: 'Detail',
            params: { id: item.id }
          }">
            <img v-lazy="item.thumb" :alt="item.title" :title="item.title" />
          </RouterLink>
        </div>
        <div class="main">
          <RouterLink :to="{
            name: 'Detail',
            params: { id: item.id }
          }">
            <h2>{{ item.title }}</h2>
          </RouterLink>
          <div class="aside">
            <span>日期：{{ formatTimestamp(+item.createDate) }} </span>
            <span>浏览：{{ item.scanNumber }}次</span>
            <span>评论：{{ item.commentNumber }}条</span>
            <a :href="`/blog/cate/${item.category.id}`" class="">{{ item.category.name }}</a>
          </div>
          <div class="desc">
            {{ item.description }}
          </div>
        </div>
      </li>
    </ul>

    <Pager @pageChange="handPagerChange" v-if="data" :current="pagerData.current" :total="data.total"
      :limit="pagerData.limit" :visibleNumber="10" />

  </div>
</template>



<style lang='less' scoped>
@import "~@/styles/var.less";

.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

li {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid @gray;

  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;

    img {
      display: block;
      max-width: 200px;
      border-radius: 5px;
    }
  }

  .main {
    flex: 1 1 auto;

    h2 {
      margin: 0;
    }

    .aside {
      span {
        margin: 0 8px;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 12pxs;
        }
      }


    }
  }
}
</style>